<template>
  <view :class="addressList.length ? 'content' : ''">
    <view
      class="list"
      v-for="(item, index) in addressList"
      :key="index"
      @click="checkAddress(item)"
    >
      <view @click="defaultValue = item.id" class="address_item_top">
        <!-- <view class="address_title">{{ item.realName }}</view> -->
        <view class="wrapper">
          <view class="u-box">
            <view>
              <text class="name">{{ item.realName }}</text>
              <text class="mobile">{{ item.phone }}</text>
            </view>
            <text v-if="item.isDefault=='1'" class="tag">默认</text>
          </view>
          <view class="address-box">
            <text class="address"
              >{{ item.province }} {{ item.city }} {{ item.district }}
              {{ item.detail }}</text
            >
            <text
              v-show="setting"
              class="iconfont icon-edit"
              @click.stop="addAddress('edit', item)"
            ></text>
          </view>
        </view>
        <!-- <text v-show="setting" style="font-size: 40rpx" class="iconFont icon-bianji2"
          @click.stop="addAddress('edit', item)"></text> -->
      </view>
      <view v-show="setting" class="address_item_bottom">
        <view class="default_box">
          <u-radio-group
            name="id"
            v-model="defaultValue"
            iconPlacement="left"
            @change="changeRadio"
          >
            <u-radio
              :name="item.id"
              :label="item.isDefault == '1' ? '已默认' : '设为默认'"
              labelSize="24rpx"
              activeColor="#FF5900"
            ></u-radio>
          </u-radio-group>
          <!-- <view style="margin-left: 10rpx">设为默认</view> -->
        </view>
        <view @click.stop="del(item.id)">删除</view>
      </view>
    </view>
    <view class="emptyBox" v-if="addressList.length == 0">
      <empty :zIndex="1">
        <view class="empty" slot="content">
          <text class="tips">还未添加地址信息</text>
        </view>
      </empty>
    </view>
    <!-- <text style="display:block;padding: 16rpx 30rpx 10rpx;lihe-height: 1.6;color: #fa436a;font-size: 24rpx;">
      重条数据做演示，实际开发中将回调改为请求后端接口刷新一下列表即可
    </text> -->
    <!-- <view style="width: 100%; height: 100%">
      <uni-calendar :insert="true" :lunar="true" :start-date="'2019-3-2'" :end-date="'2019-5-20'" />
    </view> -->
    <BaseToast
      :show="showModel"
      title="确认删除此地址"
      @cancel="showModel = false"
      @submit="delAddress"
    >
    </BaseToast>
    <view class="buttonBox"> </view>
    <BaseFootButton
      buttonText="新增地址"
      :btnStyle="{ color: '#FF5900', background: '#fff',borderColor:'#FF5900' }"
      @btnClick="addAddress('add')"
    ></BaseFootButton>
    <!-- <button class="add-btn" @click="addAddress('add')">新增地址</button> -->
  </view>
</template>

<script>
import { mapState,mapActions } from 'vuex'
import {
  getaddressList,
  delUserAddressApi,
  changeDefaultAddressApi,
} from '@/api/address/address.js'
import empty from '@/components/empty.vue'
import BaseToast from '@/components/BaseToast/BaseToast.vue'
import BaseFootButton from '@/components/BaseFootButton.vue'
export default {
  data() {
    return {
      delId: null,
      showModel: false,
      source: 0,
      defaultValue: '',
      setting: true,
      addressList: [],
    }
  },
  components: {
    empty,
    BaseFootButton,
    BaseToast,
  },
  onLoad(option) {
    if (option.source) this.source = option.source
    this.getaddressList()
  },
  computed: {
    ...mapState("user", ["token",]),
  },
  methods: {
    ...mapActions('address', ['delUserAddress', 'updateUserAddress']),
    changeRadio(e) {
      console.log(e)
      changeDefaultAddressApi({id:e}).then(res => {
        uni.$u.toast('修改成功!')
        this.getaddressList()
        if (this.source == 1)
          this.checkAddress(this.addressList.find(item => item.id == e))
      })
    },
    async getaddressList() {
      this.addressList = []
      this.defaultValue= ''
      let result = await getaddressList({
        //pageEnable: 0,
        page: 1,
        limit: 100,
      })
      if(result.data && result.data.data){
        this.addressList = result.data.data
        const _this = this
        this.addressList.forEach(item => {
           item.isDefault == "1" ? _this.defaultValue= item.id : ''
        })
        //this.$prePage()获取上一页实例，在App.vue定义
        if (!this.addressList.length && this.source == 1) {
          const prePage = this.$prePage().$vm
          prePage.addressData = {
            realName: '',
            phone: '',
            detail: '',
            isDefault: false,
            // address: '',
            // city: '',
            // cityId: '',
            // consignee: '',
            // county: '',
            // countyId: '',
            // createTime: '',
            // isDefault: '',
            // id: '',
            // mobile: '',
            // province: '',
            // provinceId: '',
            // userId: '',
          }
          prePage.addressForm = {
            province: '',
            provinceId: '',
            city: '',
            city_id: '',
            district: '',
            districtId: '',
          }
        }
      }
    },
    //选择地址
    checkAddress(item) {
      if (this.source == 1) {
        //this.$prePage()获取上一页实例，在App.vue定义
        const prePage = this.$prePage().$vm
        prePage.addressData = item
        uni.$emit('selectAddress', item)
        // if (this.$prePage().route == 'pages/order/createOrder') {
        //   if (prePage.orderSingleParams) {
        //     prePage.orderSingleParams.userAddressId = item.id
        //     prePage.createSingleOrder()
        //   } else {
        //     prePage.orderCartParams.userAddressId = item.id
        //     prePage.createCartOrder()
        //   }
        // }
        uni.navigateBack()
      }
    },
    addAddress(type, item) {
      console.log(13555555555555555)
      console.log("token="+this.token)
      if(this.token){
        uni.navigateTo({
          url: `/pages/address/addressManage?source=${
            this.source
          }&type=${type}&data=${JSON.stringify(item)}`,
        })
      }else{
        uni.navigateTo({
          url: "/packageAuth/pages/authorization/index",
        });
      }
    },
    del(id) {
      this.showModel = true
      this.delId = id
    },
    // 删除地址
    async delAddress() {
      const res = await delUserAddressApi({id:this.delId})
      if (res) {
        uni.$u.toast('删除地址成功!')
        this.showModel = false
        this.getaddressList()
      }
    },
    //添加或修改成功之后回调
    refreshList(data, type) {
      //添加或修改后事件，这里直接在最前面添加了一条数据，实际应用中直接刷新地址列表即可
      this.addressList.unshift(data)
    },
  },
}
</script>

<style lang="scss" scoped>
.emptyBox {
  position: relative;
  height: 100vh;
  width: 100vw;

  .empty {
    .tips {
      display: inline-block;
      margin: 43rpx auto;
      font-size: 28rpx;
      font-weight: 400;
      color: #666666;
    }
  }
}

.content {
  padding-bottom: 120rpx;
}

.list {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 20rpx 20rpx;
  background: #fff;
  position: relative;
  margin: 20rpx;
  border-radius: 20rpx;

  .address_item_top {
    width: 100%;
    display: flex;
    align-items: start;
  }

  .address_item_bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 33rpx;
    border-top: 0.5rpx solid #ebeced;
    margin-top: 40rpx;
    padding-top: 15rpx;

    .default_box {
      display: flex;
      flex-direction: row;
    }
  }
}

.address_title {
  margin-right: 20rpx;
  border-radius: 8px;
  font-size: 24rpx;
  font-weight: 500;
  line-height: 44rpx;
  color: #FF5900;
  text-align: center;
  width: 44rpx;
  height: 44rpx;
  background-color: rgba($color: #FF5900, $alpha: 0.1);
}

.wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.address-box {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .address {
    max-width: 80%;
    font-size: 28rpx;
    font-weight: 400;
    color: #4d4d4d;
  }
}

.u-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;

  .tag {
    padding: 0 8rpx;
    display: flex;
    align-items: center;
    height: 36rpx;
    font-size: 22rpx;
    line-height: 22rpx;
    color: $base-color;
    background: #fff;
    border: 1px solid #FF5900;
    border-radius: 8rpx;
  }

  .name,
  .mobile {
    font-weight: 500;
    margin-right: 10rpx;
    font-size: 28rpx;
    color: #1a1a1a;
  }
}

.icon-bianji {
  display: flex;
  align-items: center;
  height: 80rpx;
  font-size: 40rpx;
  color: $font-color-light;
  padding-left: 30rpx;
}

.add-btn {
  width: 702rpx;
  height: 80rpx;
  background: #00c2b5;
  border-radius: 40px;
  position: fixed;
  left: 30rpx;
  right: 30rpx;
  bottom: 16rpx;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #fff;
  background-color: $base-color;
}
.buttonBox {
  background-color: #fff;
  width: 100%;
  height: 60rpx;
  position: fixed;
  bottom: 0;
}
</style>
